{{ define "title" }}{{ .Title }}{{ end }}

{{ define "css" }}

{{ if site.Params.customSyntaxHighlighting }}
<link rel="stylesheet" data-custom-syntax-highlighting />
<style>
  .chroma {
    padding: 1em;
    background-color: var(--dream-pre-bg, #f5f5f5);
    border-radius: .5em;
    overflow: auto;
  }

  html.dark .chroma {
    background-color: var(--dream-pre-bg-dark, #262626);
  }
</style>
{{ else }}
<style>
  pre {
    padding: 1em;
    overflow: auto;
  }
</style>
{{ end }}

{{ partialCached "commentSystemHeads.html" . }}

{{ end }}

{{ define "main" }}
<div class="mt-4 px-4">
  {{ if site.Params.showTableOfContents }}
  <div class="relative" x-data="{ height: '' }" x-init="height = $el.scrollHeight + 'px'">
  {{ else }}
  <div>
  {{ end }}
    {{ if site.Params.showTableOfContents }}
    <div class="absolute right-0 lg:w-36 xl:w-48 hidden lg:block" :style="{ height }">
      {{ .TableOfContents }}

      <div class="dream-adsense px-5">
      {{ if fileExists "layouts/partials/adsense.html" }}
        {{ partialCached "adsense.html" . }}
      {{ end }}
      </div>
    </div>
    {{ end }}
    <article class="mx-auto prose prose-quoteless dark:prose-invert" id="dream-single-post-main" itemscope itemtype="http://schema.org/Article">
      {{ template "_internal/schema.html" . }}

      <header>
        <h1 itemprop="headline">{{ .Title }}</h1>
        <p class="text-sm">
          {{ if site.Params.Experimental.jsDate }}
            <span data-format="luxon">{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}</span>
          {{ else }}
            {{ .Date | time.Format "Monday, Jan 2, 2006" }}
          {{ end }}

          | <span>{{ .ReadingTime }}{{ T "minuteRead" .ReadingTime }}</span>

          {{ if ne .Params.nolastmod true }}
          | <span>{{ T "updatedAt" }}
            {{ if site.Params.Experimental.jsDate }}
              <span data-format="luxon">{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" }}</span>
            {{ else }}
              {{ .Lastmod | time.Format "Monday, Jan 2, 2006" }}
            {{ end }}</span>
          {{ end }}
        </p>
        <div class="flex justify-between">
          {{ partial "author.html" (dict "Params" .Params "template" "single") }}

          {{ partial "share.html" . }}
        </div>
      </header>

      {{ if and .Params.Cover site.Params.showSummaryCoverInPost }}
      <img src="{{ .Params.Cover }}" alt="{{ .Title }}" />
      {{ end }}

      {{ .Content | emojify }}

      {{ if site.Params.showPrevNextPost }}
      <div class="divider"></div>
      <div class="flex flex-col md:flex-row justify-between gap-4 py-4">
        {{ with .NextInSection }}
        <a class="group btn btn-outline" href="{{ .RelPermalink }}" title="{{ .Title }}">
          <ion-icon name="chevron-back"></ion-icon>
          <div class="inline-flex flex-col items-start">
            <span class="text-base-content/60 group-hover:text-neutral-content/60 text-xs font-normal">{{ T "prevPage" }}</span>
            <span class="max-w-48 truncate">{{ .LinkTitle }}</span>
          </div>
        </a>
        {{ else }}
        <div></div>
        {{ end }}

        {{ with .PrevInSection }}
        <a class="group btn btn-outline" href="{{ .RelPermalink }}" title="{{ .Title }}">
          <div class="inline-flex flex-col items-end">
            <span class="text-base-content/60 group-hover:text-neutral-content/60 text-xs font-normal">{{ T "nextPage" }}</span>
            <span class="max-w-48 truncate">{{ .LinkTitle }}</span>
          </div>
          <ion-icon name="chevron-forward"></ion-icon>
        </a>
        {{ else }}
        <div></div>
        {{ end }}
      </div>
      {{ end }}
    </article>
  </div>

  {{ if or site.Config.Services.Disqus.Shortname site.Params.utterancesRepo site.Params.valine site.Params.waline }}
  <div class="divider max-w-[65ch] mx-auto"></div>

  <section class="max-w-[65ch] mx-auto space-y-4">
    {{ partialCached "commentSystems.html" . .RelPermalink }}
  </section>
  {{ end }}
</div>
{{ end }}

{{ define "js" }}

{{ if site.Params.Experimental.jsDate }}
{{ partial "luxon.html" . }}
{{ end }}

{{ if site.Params.customSyntaxHighlighting }}
{{- $syntaxLightCSS := resources.Get "css/syntax-light.css" | minify -}}
{{- $syntaxDarkCSS := resources.Get "css/syntax-dark.css" | minify -}}
<script>
  window.customSyntaxHighlighting = {
    light: {{ $syntaxLightCSS.RelPermalink }},
    dark: {{ $syntaxDarkCSS.RelPermalink }}
  }

  document.addEventListener('alpine:initialized', () => {
    var isDark = Alpine.store('darkMode').isDark()
    var customSyntaxHighlightingUrl = isDark ? window.customSyntaxHighlighting.dark : window.customSyntaxHighlighting.light

    document
      .querySelector('link[data-custom-syntax-highlighting]')
      .setAttribute('href', customSyntaxHighlightingUrl)
  })
</script>
{{ end }}

{{ end }}
